<template>
<div id="main" style="background-image: url(static/background.png)">
  <top></top>
  <div style="margin: 0 auto; margin-top: 6%; width: 60%; height: 500px; border-radius: 10px; background: rgba(255, 255, 255, 0.6);
    padding-top: 3%; padding-left: 5%; padding-right: 5%; padding-bottom: 5%; position: relative">
    <frozen-goods v-model:data="frozenGoods" v-if="this.$route.params.value === '商品状态'"></frozen-goods>
    <history v-model:data="history" v-if="this.$route.params.value === '历史商品'"></history>
    <custom-buy v-model:data="customBuy" v-if="this.$route.params.value === '购买人信息'"></custom-buy>
  </div>
</div>
</template>

<script>
import top from "./top";
import frozenGoods from "./frozenGoods";
import history from "./history";
import customBuy from "./customBuy";
import upload from "./upload";
export default {
  name: "showModel",
  inject: ['reload'],
  components: {
    top,
    frozenGoods,
    history,
    customBuy,
    upload
  },
  data() {
    return {
      frozenGoods: [],
      history: [],
      customBuy: [],
      styleClass: {
        freeze: {
          "background-color": "#4CAF50"
        },
        unfreeze: {
          "background-color": "red"
        }
      },
    }
  },
  methods: {

  },
  created() {
    this.$http.post("http://rap2api.taobao.org/app/mock/293261/frozenGoods").then(res => {
      this.frozenGoods = res.data.frozenGoods;
    })
    this.$http.post("http://rap2api.taobao.org/app/mock/293261/history").then(res => {
      this.history = res.data.history;
      console.log(res)
    })
    this.$http.post("http://rap2api.taobao.org/app/mock/293261/customBuy").then(res => {
      this.customBuy = res.data.custom;
      console.log(res)
    })
    this.handList()
  }
}
</script>

<style scoped>
#main {
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%
}
.navbar11 {
  margin: 0 auto;
  margin-bottom: 0;
  position: fixed;
  left: 15px;
  right: 15px;
  z-index: 9999;
}
.sidebar {
  background: lightslategray;
  padding: 0;
  position: fixed;
  top: 15%;
  width: 10%;
  /*bottom: 15%;*/
}
.content {
  position: fixed;
  top: 15%;
  right: 0;
  bottom: 0;
  overflow: scroll;
}

table.title{
  position: fixed;
  width: 98%;
  height: 10%;
  margin: 0 auto;
  top: 0;
  background-color: #037bd2;
}
#title{
  font-size: xxx-large;
  color: whitesmoke;
}
button.title_button{
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
}
.title_button:hover{
  /*background-color: lightblue; !* Green *!*/
  color: lightgray;
}
.title_button:active{
  /*background-color: lightblue; !* Green *!*/
  color: lightslategrey;
  border: none;
}
#title_tr{
  color: #037bd2;
  border-style: none;
}
td.title_td{
  border-style: none;
}
span{
  text-align: center;
}
img{
  border-radius: 20px;
  width: 100px;
  height: 100px;
}
#imglist{
  text-align: center;
}
#imglist img{
  float: left;
}
.left:hover{
  background-color: slategrey;
}
a.astyle{
  background-color: #037bd2;
  font-size: xx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor:pointer
}
.astyle:hover{
  color: lightgray;
}
input.dj{
  width: 30%;
  margin: 0 auto;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  margin-top: 5%;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}
.dj:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #99eab7;
  transform: translateY(4px);
  border: none;
}
.but1 {
  margin: 0 auto;
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  margin-top: 5%;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 5px;
}
.but1:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #99eab7;
  transform: translateY(4px);
}
td{
  margin: 0 auto;
  margin-top: 5%;
}
#titleText{
  background-color: #037bd2;
  font-size: xxx-large;
  color: whitesmoke;
  transition-duration: 0.4s;
  border: none;
  width: 100%;
  text-decoration: none;
  cursor:pointer
}
.s1 {
  display: inline-block;
  height: 40px;
  width: 40px;
  color: white;
  font-size: x-large;
  background: rgba(135, 206, 250, 1);
  border: 1px solid lightgray;
  cursor: pointer;
  line-height: 40px;
}
.s1:hover {
  background: rgba(135, 206, 250, 0.7);
  box-shadow: white inset 0 0;
}
.s2 {
  display: inline-block;
  height: 40px;
  width: 100px;
  color: white;
  font-size: x-large;
  background: rgba(135, 206, 250, 1);
  border: 1px solid lightgray;
  cursor: pointer;
  line-height: 40px;
}
.s2:hover {
  background: rgba(135, 206, 250, 0.7);
  box-shadow: white inset 0 0;
}
.s3 {
  display: inline-block;
  height: 40px;
  color: black;
  font-size: x-large;
  line-height: 40px;
}
.btu2 {
  border: none;
  border-radius: 10px;
  color: white;
  font-size: large;
  background: rgba(135, 206, 250, 1);
}
.table {
  margin: 0 auto;
  border: 2px solid steelblue;
  text-align: center;
  width: 1000px;
  /*height: 600px;*/
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px 10px 0 0;
  line-height: 50px;
}
.tr1 {
  background: steelblue;
  border-radius: 10px;
  border: 2px solid steelblue;
  color: white;
  font-family: "Microsoft Himalaya", sans-serif;
  text-align: center;
}
.tr2 {
  background: white;
  font-family: "Microsoft Himalaya", sans-serif;
  color: #4F4F4F;
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0);
}
.tr2:hover {
  background: rgba(79, 79, 79, 0.3);
}

</style>
